<script setup>
import { ref, onMounted } from 'vue';
import { getCurrentInstance } from "vue";
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import { confirmDelete } from '@/utils/modalcomfir.js'
import { editpwd } from '@/common/http.api.js'
// import { useRouter  } from 'vue-router'

import menu from './menu.js'

const { proxy } = getCurrentInstance();

const collapsed = ref(false)
const selectedKeys = ref([])

const visible = ref(false)
const pwd1 = ref()
const pwd2 = ref()
// const $router = useRouter()
const editPwd = async () =>{
  if(pwd1.value !== pwd2.value) return message.error('两次密码不一致！')
  // 获取id
  let data = {
    admID:sessionStorage.getItem('admID'),
    pwd : pwd2.value
  }
  const res = await editpwd(data)
  visible.value = false
  message.success('修改成功！2秒后将自动退出系统,请重新登录')
  setTimeout(() => {
    $router.replace({path:'/login'})
    sessionStorage.clear()
  }, 2000);
}



const name = ref()
name.value = sessionStorage.getItem('admName') || ''

onMounted(() => {
  let menukey = sessionStorage.getItem('munekey')
  if (menukey) {
    selectedKeys.value = [Number(menukey)]
  } else {
    selectedKeys.value = [menu[0].id]
  }
})

const firstmenuClick = ({ key }) => {
  let menukey = sessionStorage.setItem('munekey', key)
  selectedKeys.value = [menukey]
}

const noChildren = () => {
  return menu.filter((item) => !item.children);  // 无子菜单
}

noChildren()
const hasChildren = () => {
  return menu.filter((item) => item.children); // 有子菜单
}
hasChildren()

const $router = useRouter()

const logout = () => {
  confirmDelete('退出登录', '确定要退出登录吗？', () => {
    sessionStorage.clear()
    $router.replace({ path: '/login' })
  }
  )
}

</script>

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <div class="title">智慧社区</div>
      <!-- 侧边菜单 -->
      <a-menu v-model:selectedKeys="selectedKeys" @click="firstmenuClick" theme="dark" mode="inline">
        <!-- 无子菜单 -->
        <a-menu-item :index="item.path" v-for="item of noChildren()" :key="item.id">
          <router-link :to="'/' + item.path">
            <component :is="proxy.$antIcons[item.iconClass]" />
            <span>&nbsp;{{ item.authName }} </span>
          </router-link>
        </a-menu-item>
        <!-- 一级菜单 -->
        <a-sub-menu :key="item.id" v-for="item of hasChildren()">
          <template #title>
            <component :is="proxy.$antIcons[item.iconClass]" />
            <span v-if="item.children !== null">&nbsp;{{ item.authName }}</span>
            <!-- <span v-else @click="toHome()">{{item.authName}}</span> -->
          </template>
          <!-- 二级菜单 -->
          <a-menu-item v-for="sub of item.children" :key="sub.id">
            <router-link :to="'/' + sub.path">
              <span>&nbsp;{{ sub.authName }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

      </a-menu>
    </a-layout-sider>

    <a-layout>
      <!-- 头部 -->
      <a-layout-header class="hd-box" style="background: #fff; padding: 0">
        <div style="margin-left: 16px;">
          <a-breadcrumb-item v-for="(item, index) in $route.meta.breadcrumb" :key="index">{{ item }}</a-breadcrumb-item>
        </div>
        <div class="hd-right-container">
          <span> 欢迎-{{name}} |</span>
          <span @click="visible = true">修改密码 |</span>
          <span @click="logout"><poweroff-outlined /></span>
        </div>
      </a-layout-header>
      <!-- 主体 -->
      <a-layout-content style="margin: 0 16px">
        <div style=" height:16px"></div>
        <div :style="{ padding: '24px', background: '#fff', minHeight: '650px' }">
          <RouterView></RouterView>
        </div>
      </a-layout-content>
    </a-layout>
    <a-modal v-model:visible="visible" title="修改密码" @ok="editPwd">
      新密码:<a-input-password  v-model:value="pwd1" :maxlength="15" placeholder="请输入新密码" />
      <div style="height: 15px;"></div>
      再次输入:
      <a-input-password v-model:value="pwd2" :maxlength="15" placeholder="请再次输入" />
    </a-modal>
  </a-layout>
</template>



<style lang="less" scoped>
.hd-box {
  display: flex;
  justify-content: space-between;
}

.hd-right-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  span {
    padding: 0 10px;
  }

  span:hover {
    color: #1890ff;
  }
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 16px 0;
  text-align: center;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>